<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../static/js/jquery-1.11.0.js"></script>
    <title>Title</title>
    <style>

        #d1 {
            width: 480px;
            height: 86vh;
            position: absolute;
            margin-top: 2vh;
            /*margin-left: 400px;*/
            right: 500px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 16px;
            text-align: center;
            /**/
            /*    内容超出时，打开滚动条*/
            overflow: auto;
        }

        .h1 {
            margin-top: 50px;
        }

        .d1 {
            width: 100%;
        }

        .d1 > select {
            width: 200px;
            height: 30px;
            margin-top: 50px;
        }

        #fmoney {
            width: 200px;
            height: 30px;
        }


    </style>
    <script>

        $(function () {
            //下拉框时改变触发事件//根据银行卡查询金额
            $(".laySelect").change(function () {
                var cid = $(".laySelect").select().val();//文本框输入金额
                $.ajax({
                    url: "/EnquiryServlet",
                    type: "post",
                    data: {
                        action: "findCid",
                        /* fmoney: fmoney,*/
                        c_id: cid
                        /*u_id: u_id,
                        code: code*/

                    },
                    dataType: "json",
                    success: function (d) {
                        //成功
                        //渲染
                        console.log(d)
                        if (d.code == 1) {
                            //alert(d.data)
                            $(".p").text("银行卡余额为：" + d.data + "￥")
                        } else {
                            $(".p").text(" ")
                        }
                        $("#fmoney").blur(function () {
                            var fmoney = $("#fmoney").val();
                            //正则表达式判断是否输入的值为大于零的正数
                            var r = /^([1-9][0-9]*)+(.[0-9]{1,2})?$/;

                            //alert(fmoney)
                            if (!r.test(fmoney)) {
                                $(".f").text("充值金额不能小于等于0")
                            }
                            //判断充值余额是否合法
                            else if (fmoney > d.data) {
                                $(".f").text("银行卡余额不足")
                            } else {
                                $(".f").text("")
                            }
                        })
                    },
                    error: function () {
                        //服务器出现异常时
                    }
                })
            })


            var u_id = $("#userid").text();
            // var  u_id=3;
            //下拉列表
            $.ajax({
                type: "post",
                url: "/BankServlet",  //访问后台去数据库查询select的选项,此处需填写后台接口路径
                dataType: "json",
                data: {
                    action: "findUid", u_id: u_id,
                },
                success: function (d) {
                    console.log(d)

                    if (d.code == 1) {
                        for (var i = 0; i < d.data.length; i++) {
                            var a = d.data[i].c_id;
                            var b = a.substring(a.length - 4);
                            $(".laySelect").append(" <option value='" + d.data[i].c_id + "'>" + d.data[i].c_account + "(" + b + ")</option>")
                        }
                    }
                }
            })
            $("#sub_btn").click(function () {
                var u_id = $("#userid").text();//转入app账户
                var c_id = $(".laySelect").select().val();//从银行卡转出
                var code = $("#code").val(); //验证码
                var fmoney = $("#fmoney").val();
                console.log(fmoney)
                var c_pwd = "";
                //输入框弹窗，获取到支付密码
                var p = prompt("请输入支付密码", "");
                if (p != "" && p != null) {
                    c_pwd = p;
                }

                $.ajax({
                    url: "/EnquiryServlet",
                    type: "post",
                    dataType:"json",
                    data: {
                        action: "TopUp",
                        //sub_btn: sub_btn,
                        c_pwd: c_pwd,
                        c_id: c_id,
                        u_id: u_id,
                        codes: code,
                        fmoney: fmoney
                    },

                    success: function (d) {
                        console.log("------")
                        console.log(d);
                        if (d.code == 1) {
                            alert(d.msg);
                        } else {
                            alert(d.msg);
                        }
                    },
                    error: function () {
                        alert('Error');
                    }
                })
            })
        })
    </script>
</head>
<body>
<div id="d1">
    <h1 class="h1">充&emsp;值&emsp;入&emsp;口</h1>
    <div class="d1">
        <label>&emsp;选择银行卡：</label>
        <select name="interest" id="proName" class="laySelect">
            <option value="-1">请选择</option>
        </select><br>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;<span style="color: brown" class="p"></span>
        <br><br>
        <label>输入充值金额：</label>
        <input type="text" name="fmoney" id="fmoney" class="i"><br>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; <span style="color: brown" class="f"></span>
        <br><br>
        <label>&emsp;&emsp;验证码：</label>
        <input class="txt" type="text" name="code" style="width: 100px;height: 40px" id="code" placeholder="请输入验证码"/>
        <img id="code_img" alt="" src="http://localhost:8080/kaptcha.jpg"
             style="position: relative;left: 3px; top: 12px; width: 90px;height: 40px;"><br>
        <span style="color: brown" class="c"></span>
        <br>
        <br>
        <br>
        <input type="submit" value="确认充值" id="sub_btn"
               style="width: 200px;height: 40px;position: relative;border-radius: 16px;"/>
    </div>
</div>
</body>
</html>